import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import { Text } from '@tarojs/components'
import classnames from 'classnames'
import './iconfont/iconfont.css'
import './iconfont/iconfont2.css'
import './iconfont/jekun-icon/iconfont.css'
import './index.scss'

type Props = {
  name: string
  size?: any
  color?: string
  activeClassName?: any
  handle?: any
}
export default class Iconfont extends Component<Props, {}> {
  constructor () {
    super(...arguments)
  }
  static defaultProps = {
    activeClassName: ''
  }
  handleEvent(e?) {
    const { handle } = this.props
    handle && handle(e)
  }
  render() {
    let { size, color, name, activeClassName } = this.props
    const defaultStyle = {
      'display': 'inline-flex',
      'fontSize': '24rpx'
    }
    if (color) {
      defaultStyle['color'] = color
    }

    if (['weapp', 'alipay'].includes(process.env.TARO_ENV)) {
      // 小程序转换)(微信小程序、支付宝小程序)
      defaultStyle['fontSize'] = `${size}rpx`
    } else {
      // 其他环境专题（还没size计算转换，后续需要再处理）
      defaultStyle['fontSize'] = `${size}px`
    }

    let iconClassName = classnames('iconfont', name)
    let concatClassName = `${iconClassName} ${activeClassName}`
    return (
      <Text onClick={() => this.handleEvent()} style={defaultStyle} className={concatClassName}></Text>
    )
  }
}
